import React, { Component,createRef } from 'react';

class Form extends Component {

  constructor() {
    super();
    this.state = {
      name: "",
      desc: "",
      city: [1,2]
    }
    this.address = createRef()
  }

  handleChange(event) {
    console.log(event.target.value)

    if(event.target.name==='city'){
      this.state.city.push(event.target.value);
      this.setState({})
      return;
    }

    this.setState({
      [event.target.name]: event.target.value.toUpperCase()
      // [event.target.name]: event.target.value
    })
  }


  handleSubmit = () => {
    console.log(this.state,this.address.current.value)
    
  }

  render() {
    return (
      <div>
        名称：<input type="text" value={this.state.name} name="name" onChange={this.handleChange.bind(this)} /><br></br>
        描述：<textarea name="desc" value={this.state.desc} onChange={this.handleChange.bind(this)}></textarea><br></br>
        城市：<select name="city" multiple 
        value={this.state.city}
        onChange={this.handleChange.bind(this)}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">天津</option>
        </select><br></br>

        <input type="text" ref={this.address}/>

        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

export default Form;